<template>
  <div class="home">
      <div  class="tabArr">
          <div v-for="(item,index) in tabArr" :key="index"  >
              <div :class="state.activeIndex==0?'tabItem activeTab':'tabItem' " v-if="index== 0" >
                 <i @click="goHome(item,index)" style="color:#606266;font-size:30px;margin-left:0;" class="el-icon-s-home"></i>
              </div>
              <div class="tabItem" v-else>
                  <span @click="tabSelectedHandle(item,index)" :class="state.activeIndex==index ? 'activeTab':'' ">{{item.title}}</span>
                  <i class="el-icon-close" @click="removeTab(index)"></i>
              </div>

          </div>
      </div>
  </div>
</template>
<script>
// vue3 弃用了beforeCreate created
import {getCurrentInstance,ref,reactive,onMounted,onUpdated,onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const state = reactive({
    activeIndex : 0 ,
});

export default {
  name: 'tabs',
  components: {},
  props:{
      tabArr:{
        type : Array,
        default:()=>{
            return []
        },
      }
  },
  // setup(props,ctx){
  setup(props,{emit}){
    const ctx = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    onMounted(()=>{
        //console.log(props.tabArr);
        state.activeIndex = props.tabArr.length - 1
    })
    router.beforeEach((to, from, next) => {
      //console.log(to);
      let title = to.meta.title
       store.state.contentTabs.forEach((item,index)=>{
         if(item.title==title){
           // console.log(index);
           state.activeIndex = index
         }
       })
      if(title!='基础知识任务详情'){
          localStorage.removeItem('is_file')
      }
      next()
    })
    function tabSelectedHandle(_item,_index){
        if (state.activeIndex == _index) {
            return
        }
        state.activeIndex = _index
        router.push({
          name: _item.name,
          params: { ..._item.params },
          query: { ..._item.query }
        })
    }
    function removeTab(index){
         store.state.contentTabs.splice(index,1)
         if (index==state.activeIndex) {
            let item = store.state.contentTabs[store.state.contentTabs.length-1]
             router.push({
                name: item.name,
                params: { ...item.params },
                query: { ...item.query }
            })
         }
         state.activeIndex = store.state.contentTabs.length - 1
    }
    function goHome(_item,_index){
        console.log(_item);
        console.log(_index);
         if (state.activeIndex == _index) {
            return
        }
    }
    return{
      state,
      tabSelectedHandle,
      removeTab,
      goHome,
    }
  },
  watch:{
      tabArr(_newVal,_oldVal){
         state.activeIndex = _newVal.length - 1
        //   console.log('变化了');
        //   console.log(_oldVal);
        //   console.log(_newVal);

      }
  }
}
</script>
<style lang="scss" scoped>

.activeTab{
    color: #409EFF !important;
    border-bottom: 3px solid #409EFF;
}

.home {
  height: 38px;
  width: 100%;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
  .tabArr{
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      height: 100%;
      .tabItem{
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 20px;
          color:  #606266;
          span{
              height: 100%;
              cursor: pointer;
              display: flex;
              align-items: center;
          }
          i{
              display: inline-block;
              margin-left: 5px;
              cursor: pointer;
          }
      }
  }
}
</style>
